<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>龙眠虎计算机 工具系 - 哔哩哔哩</title>
    <link href="css/me.css" rel="stylesheet">
    <link href="css/common.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <!-- ele 的引入放在vue下面-->
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <script src = 'plug-in/jquery-2.2.0.min.js' type='text/javascript'></script>
    <script src="js/common.js"></script>
</head>
<body>

<div id="app">
    <common></common>
    <!-- 背景图与头像 -->
    <div class="profile-headers">
        <div class="profile-header">
            <div class="avatar-wrapper">
                <img :src="userInfo.headimg" class="avatar">
                <h2>{{userInfo.name}}</h2>
                <p>{{userInfo.intro}}</p>
            </div>
        </div>

        <div class="button-box">
            <button class="button-box-button">关注</button>
            <button class="button-box-button">发消息</button>
        </div>
    </div>


    <div class="container">
        <!-- 左侧主内容 -->
        <div class="main-content">
            <div class="nav-tabs">
                <div class="nav-item active">
                    <svg width="18" height="18">▶</svg>
                    主页
                </div>
                <div class="nav-item">
                    <svg width="18" height="18">📊</svg>
                    动态
                </div>
                <div class="nav-item">
                    <svg width="18" height="18">📹</svg>
                    投稿
                </div>
                <input type="text" class="search-box" placeholder="搜索视频">
            </div>

            <!-- 代表作 -->
            <div class="video-section">
                <h3 class="section-title">代表作</h3>
                <div class="video-grid">
                    <div class="video-card" v-for="v in hotvideolimit">
                        <img class="video-thumb" :src="v.image">
                        <div class="video-info">
                            <div class="video-title">{{v.vname}}</div>
                            <div class="video-meta">{{v.vcount > 10000 ? v.vcount/10000 + "万" : v.vcount}}播放 · {{v.time.toString().split("+")[0].replace('T', ' ')}}</div>
                        </div>
                    </div>
                    <!-- 更多视频... -->
                </div>
            </div>

            <!-- TA的视频 -->
            <div class="video-section">
                <h3 class="section-title">TA的视频</h3>
                <div class="video-grid">
                    <div class="video-card">
                        <div class="video-thumb"></div>
                        <div class="video-info">
                            <div class="video-title">【学生作品】蓝宝石出版本学院 版面稿《加油，我爱你》</div>
                            <div class="video-meta">3.1万播放 · 2023-02-28</div>
                        </div>
                    </div>
                    <!-- 更多视频... -->
                </div>
            </div>
        </div>

        <!-- 右侧边栏 -->
        <div class="sidebar">
            <div class="stats-card">
                <div class="stat-item">
                    <span>播放量</span>
                    <span>86.5万</span>
                </div>
                <div class="stat-item">
                    <span>粉丝数</span>
                    <span>15.2万</span>
                </div>
                <div class="stat-item">
                    <span>关注数</span>
                    <span>407</span>
                </div>
            </div>

            <div class="notice-board">
                <h3>公告栏</h3>
                <div class="notice-item">3-1 进来了不关注一下吗？</div>
                <div class="notice-item">直播间关注数 | 407</div>
                <div class="notice-item">专栏投稿征集进行中</div>
            </div>
        </div>
    </div>
</div>

</body>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            userInfo:{},
            hotvideolimit:[],
        },
        created() {
            axios.get("b-user/search/getUserById"+location.search).then(res=> this.userInfo = res.data)
            axios.get("video/getHotVideoByIdLimit"+location.search).then(res=> this.hotvideolimit = res.data)
        },
        methods : {}
    })
</script>
</html>